<template>
    <div v-addClass class="ve_table">
        <!-- table工具条 -->
        <el-row v-delete class="ve_header_row_class_name ve_p_10">
            <slot name="tool_bar"></slot>
        </el-row>
        <!-- 搜索 -->
        <el-form ref="pageQueryForm" :inline="true" :model="pageQueryParams">
            <el-form-item label="名称" prop="name">
                <el-input
                    clearable
                    v-model="name"
                    placeholder="请输入名称"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="doPageQuery(pageQueryParams, getDataList)"
                >
                    {{ buttons.search.name }}
                </el-button>
                <el-button
                    @click="
                        doResetPageQuery(
                            pageQueryForm,
                            pageQueryParams,
                            getDataList,
                        )
                    "
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>
        <div class="ve_table_page">
            <!-- 列表 -->
            <div class="ve_table_content" ref="tableBox">
                <el-table
                    ref="elTable"
                    height="100%"
                    stripe
                    border
                    highlight-current-row
                    @row-click="
                        (row, column, event) => (ve_rowIndex = rowClick(event))
                    "
                    :row-class-name="
                        ({ rowIndex }) => rowClassName(rowIndex, ve_rowIndex)
                    "
                    :cell-class-name="
                        ({ rowIndex }) => cellClassName(rowIndex, ve_rowIndex)
                    "
                    header-row-class-name="ve_header_row_class_name"
                    header-cell-class-name="ve_header_cell_class_name"
                    style="width: 100%"
                    v-bind="$attrs.table"
                    :data="pageTableData"
                    @selection-change="selectionChange"
                >
                    <template #tool_bar>
                        <el-button
                            v-permission="['add']"
                            size="small"
                            type="primary"
                            @click="handleRowEdit(buttons.add.name)"
                        >
                            {{ buttons.add.name }}
                        </el-button>
                    </template>
                    <slot></slot>
                    <template #append><slot name="append"></slot></template>
                    <template #empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                    <el-table-column
                        prop="code"
                        label="角色编码"
                    ></el-table-column>
                    <el-table-column
                        prop="name"
                        label="角色名"
                        width="120"
                    ></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template v-slot="{ row }">
                            <el-tag :type="row.status ? '' : 'danger'">
                                {{ row.status ? "启用" : "停用" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template v-slot:default="{ row }">
                            <el-button
                                v-permission="['edit']"
                                @click.prevent="
                                    handleRowEdit(buttons.edit.name, row)
                                "
                                type="primary"
                                size="small"
                            >
                                {{ buttons.edit.name }}
                            </el-button>
                            <el-button
                                v-permission="['del']"
                                @click.prevent="handleRowDel(row.id)"
                                type="danger"
                                size="small"
                            >
                                {{ buttons.del.name }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[
                    10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000,
                ]"
                :hide-on-single-page="false"
                v-bind="$attrs.pagination"
                :current-page="pageQueryParams.current"
                :page-size="pageQueryParams.size"
                :total="pageQueryParams.total"
                @size-change="
                    (size) =>
                        doPageSizeChange(size, pageQueryParams, getDataList)
                "
                @current-change="
                    (size) =>
                        doPageCurrentChange(size, pageQueryParams, getDataList)
                "
            >
                <slot name="pagination"></slot>
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">


import {doPageCurrentChange, doPageQuery, doPageSizeChange, doResetPageQuery} from "./LazyCrudFunction.js";
import { onMounted, reactive, ref,defineComponent } from "vue";


export default defineComponent({
    name: "LazyCrud",
    methods: {
        doPageCurrentChange,
        doPageSizeChange,
        doPageQuery,
        doResetPageQuery,
    },
    inheritAttrs: false,
    directives: {
        delete: (el) => {
            const length = el.children.length;
            if (length <= 0) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        },
        addClass: (el) => {
            el.parentNode && el.parentNode.classList.add("ve_flex_col");
        },
    },
    props: {
        r: {
            type: Object, //{columns,queryColumns,done}
            // type: Object as () => RProps,
            required: true,
        },
    },
    setup(props, context) {
        const { emit } = context;
        const elTable = ref(null);
        const ve_rowIndex = ref(null);

        const pageQueryParams = reactive({
            size: 10,
            current: 1,
            total: 0,
        });
        const pageQueryForm = ref(null);
        const pageTableData = ref(null);

        const tableBox = ref(null);
        /**
         * @description:行点击事件
         * @return {*}
         * @param event
         */
        const rowClick = (event) => {
            // return event.currentTarget.rowIndex;
            return event;
        };
        /**
         * @description:高亮当前行
         * @return {*}
         * @param rowIndex
         * @param ve_rowIndex
         */
        const rowClassName = (rowIndex, ve_rowIndex) => {
            if (rowIndex === ve_rowIndex) {
                return "ve_row_class_name";
            } else {
                return "";
            }
        };
        /**
         * @description:高亮单元格
         * @return {*}
         * @param rowIndex
         * @param ve_rowIndex
         */
        const cellClassName = (rowIndex, ve_rowIndex) => {
            if (rowIndex === ve_rowIndex) {
                return "ve_cell_class_name";
            } else {
                return "";
            }
        };
        const selectionChange = (val) => {
            // console.log(val);
            emit("selectionChange", val);
        };

        /**
         * @description: 获取列表数据
         * @param {*}
         * @return {*}
         */
        const getDataList = async () => {
            // const { code, data } =
            //     await VE_API.system.rolePage(pageQueryParams);
            // // console.log("code:" + code);
            // if (code === 0) {
            //     const { size, current, total, record } = data;
            //     pageQueryParams.size = size;
            //     pageQueryParams.current = current;
            //     pageQueryParams.total = total;
            //     pageTableData.value = record;
            // }
          pageQueryParams.size = 10;
          pageQueryParams.current = 1;
          pageQueryParams.total = 100;
          let record=[]
          for (let i = 0; i < 10; i++) {
            record.push({
              code: "net"+i,
              createTime: new Date(),
              id: i,
              isDeleted: false,
              name: "net",
              parentCode: null,
              status: true,
              updateTime: new Date(),
            })
          }
          pageTableData.value = record;

          console.log("init");
        };
        const buttons = {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
            member: { name: "查看成员", toPath: true }, //topath:true 需要设置跳转路径
        };

        const handleRowEdit = (row) => {
            console.log(row);
        };
        const handleRowDel = (row) => {
            console.log(row);
        };
        onMounted(async () => {
            await getDataList();
            // maxHeight(pagination, queryForm, toolBar, ve_max_height);
        });
        return {
            elTable,
            tableBox,

            ve_rowIndex,
            cellClassName,
            rowClassName,
            rowClick,
            selectionChange,
            buttons,
            handleRowEdit,
            handleRowDel,
            pageQueryParams,
            pageQueryForm,
            getDataList,
            pageTableData,
            props,
        };
    },
});
</script>

<style lang="scss" scoped>
.ve_table {
    flex: 1;
    display: flex;
    flex-direction: column;
    .ve_table_page {
        flex: 1;
        display: flex;
        flex-direction: column;
        .ve_table_content {
            flex: 1;
        }
    }
}
</style>
